@page "/range-selector/light-weight"
@using Newtonsoft.Json
@using  Syncfusion.Blazor.Charts
@using Syncfusion.Blazor
@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample represents the total number of business and weekend days in a selected period.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the Light Weight Range Navigator. You can use <code>Width</code>, <code>Height</code>, <code>Fill</code> and <code>Border</code> properties to customize the thumb in range navigator. You can also change the type of the <code>Thumb</code> using type property.</p>
</ActionDescription>

@if (LightWeightData == null)
{
    <div class="stockchartloader"></div>
}
else
{
    <div class="control-section" align="center">
        <h4 style="font-family: Segoe UI;font-weight: 500; font-style:normal; font-size:15px;">Calculate the Bussiness and Weekend days in a period</h4>
        <br /><div>
            <SfRangeNavigator Value="@RangeValue" IntervalType="RangeIntervalType.Months" Theme="@RangeNavigatorTheme" AnimationDuration="500" LabelFormat="MMM" ValueType="Syncfusion.Blazor.Charts.RangeValueType.DateTime" DataSource="@LightWeightData" XName="x" YName="y">
                <RangeNavigatorMajorGridLines Width="0.000001"></RangeNavigatorMajorGridLines>
            </SfRangeNavigator>
        </div>
    </div>

}
@code{

    public Theme RangeNavigatorTheme { get; set; } = Theme.Bootstrap4;
    public ChartData[] LightWeightData { get; set; }
    public object[] RangeValue = new object[] { new DateTime(2017, 10, 01), new DateTime(2017, 11, 01) };
    private string currentUri;

    protected override async Task OnInitializedAsync()
    {
        await Task.Run(() =>
        {
            LightWeightData = JsonConvert.DeserializeObject<ChartData[]>(System.IO.File.ReadAllText("./wwwroot/data/range-navigator/default-data.json"));
        });
    }

    public class ChartData
    {
        public DateTime x { get; set; }
        public double y { get; set; }
    }

    protected override void OnInitialized()
    {
        currentUri = NavigationManager.Uri;
        if (currentUri.IndexOf("material") > -1)
        {
            RangeNavigatorTheme = Theme.Material;
        }
        else if (currentUri.IndexOf("fabric") > -1)
        {
            RangeNavigatorTheme = Theme.Fabric;
        }
        else if (currentUri.IndexOf("bootstrap4") > -1)
        {
            RangeNavigatorTheme = Theme.Bootstrap4;
        }
        else if (currentUri.IndexOf("bootstrap") > -1)
        {
            RangeNavigatorTheme = Theme.Bootstrap;
        }
        else if (currentUri.IndexOf("highcontrast") > -1)
        {
            RangeNavigatorTheme = Theme.HighContrast;
        }
        else if (currentUri.IndexOf("tailwind") > -1)
        {
            RangeNavigatorTheme = Theme.Tailwind;
        }
        else
        {
            RangeNavigatorTheme = Theme.Bootstrap4;
        }
    }
}